<div id="gallery-content">
    <section id="gallery" class="mb-12">
        <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Prompt Gallery</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-8">Choose a category to browse video examples and the prompts that created them.</p>
        <div id="gallery-categories" class="flex flex-wrap gap-3 mb-8"></div>
        <div id="gallery-sliders-container"></div>
    </section>
</div>
<style>
    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        background: #000;
        border-radius: 8px;
    }
    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* Remove the old thumbnail styles and play overlay */
    .video-thumbnail, .play-overlay, .play-icon-svg {
        display: none !important;
    }
    .gallery-examples .slider-container {
        scrollbar-width: thin;
        scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    }
    .gallery-examples .slider-container::-webkit-scrollbar {
        height: 8px;
    }
    .gallery-examples .slider-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .gallery-examples .slider-container::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 4px;
    }
    .gallery-examples .slider-container::-webkit-scrollbar-thumb:hover {
        background-color: rgba(156, 163, 175, 0.7);
    }
</style>
